<template>
	<transition name="el-zoom-in-center">
		<div class="JNPF-preview-main">
			<div class="JNPF-common-page-header">
				<el-page-header @back="goBack" :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"/>
				<div class="options">
					<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
					<el-button @click="goBack">取 消</el-button>
				</div>
			</div>
			<el-row :gutter="15"  class="main" :style="{margin: '0 auto',width:'100%'}">
			<el-form ref="elForm" :model="dataForm" size="medium" label-width="120px" label-position="right" :disabled="!!isDetail" :rules="rules">
				<el-col :span="12">
					<el-form-item label="预案名称" prop="yamc" required >
						<el-input v-model="dataForm.yamc" placeholder="请输入预案名称" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="所属部门" prop="sybm" required >
						<el-select v-model="dataForm.sybm" placeholder="请选择所属部门" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in sybmOptions" :key="index" :label="item.F_FullName" :value="item.F_Id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="预案类型" prop="yalx" required >
						<el-input v-model="dataForm.yalx" placeholder="请输入预案类型" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="危险源关联" prop="wxygl" required >
						<el-input v-model="dataForm.wxygl" placeholder="请输入危险源关联" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="预案级别" prop="yajb" required >
						<el-select v-model="dataForm.yajb" placeholder="请选择预案级别" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in yajbOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="编写人" prop="bxr" required >
						<el-select v-model="dataForm.bxr" placeholder="请选择编写人" clearable :style='{"width":"100%"}' filterable>
							<el-option v-for="(item, index) in bxrOptions" :key="index" :label="item.F_RealName" :value="item.F_Id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="编写部门" prop="bxbm" required >
						<el-select v-model="dataForm.bxbm" placeholder="请选择编写部门" clearable :style='{"width":"100%"}'  filterable>
							<el-option v-for="(item, index) in bxbmOptions" :key="index" :label="item.F_FullName" :value="item.F_Id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="发布实施日期" prop="fbssrq" required >
						<el-date-picker v-model="dataForm.fbssrq" placeholder="请选择发布实施日期" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="状态" prop="zt" >
						<el-select v-model="dataForm.zt" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in ztOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="应急队伍" prop="yjdw" >
						<el-select v-model="dataForm.yjdw" placeholder="请选择应急队伍" clearable :style='{"width":"100%"}' multiple >
							<el-option v-for="(item, index) in yjdwOptions" :key="index" :label="item.DWMC" :value="item.Id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="应急物资" prop="yjwz" >
						<el-select v-model="dataForm.yjwz" placeholder="请选择应急物资" clearable :style='{"width":"100%"}' multiple >
							<el-option v-for="(item, index) in yjwzOptions" :key="index" :label="item.WZMC" :value="item.ID" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="应急人员" prop="yjry" >
						<el-select v-model="dataForm.yjry" placeholder="请选择应急人员" clearable :style='{"width":"100%"}' multiple >
							<el-option v-for="(item, index) in yjryOptions" :key="index" :label="item.F_RealName" :value="item.F_Id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="预案附件" prop="yafj" >
						<JNPF-UploadFz v-model="yafjList" accept="" :fileSize="2" sizeUnit="MB" :limit="9" buttonText="点击上传" >
						</JNPF-UploadFz>
					</el-form-item>
				</el-col>
			</el-form>
			</el-row>
		</div>
	</transition>

</template>
<script>
import request from '@/utils/request'
import {getDictionaryDataSelector}from '@/api/systemData/dictionary'
import {previewDataInterface}from '@/api/systemData/dataInterface'
export default {
    data() {
      return {
        visible: false,
        isDetail: false,
        dataForm: {
					yamc:undefined,
					sybm:undefined,
					yalx:undefined,
					wxygl:undefined,
					yajb:undefined,
					bxr:undefined,
					bxbm:undefined,
					fbssrq:undefined,
					zt:undefined,
					yjdw:[],
					yjwz:[],
					yjry:[],
					yafj:undefined,

        },
        rules: {
						yamc:[
						{
							required:true,
							message:'请输入预案名称',
							trigger:'blur'
						},
						],
						sybm:[
						{
							required:true,
							message:'请输入所属部门',
							trigger:'blur'
						},
						],
						yalx:[
						{
							required:true,
							message:'请输入预案类型',
							trigger:'blur'
						},
						],
						wxygl:[
						{
							required:true,
							message:'请输入危险源关联',
							trigger:'blur'
						},
						],
						yajb:[
						{
							required:true,
							message:'请输入预案级别',
							trigger:'blur'
						},
						],
						bxr:[
						{
							required:true,
							message:'请输入编写人',
							trigger:'blur'
						},
						],
						bxbm:[
						{
							required:true,
							message:'请输入编写部门',
							trigger:'blur'
						},
						],
						fbssrq:[
						{
							required:true,
							message:'请输入发布实施日期',
							trigger:'blur'
						},
						],

        },
				sybmOptions:[],
				yajbOptions:[{"fullName":"公司级","id":"公司级"},{"fullName":"分厂级","id":"分厂级"},{"fullName":"车间级","id":"车间级"}],
				bxrOptions:[],
				bxbmOptions:[],
				ztOptions:[{"fullName":"现行","id":"现行"},{"fullName":"作废","id":"作废"}],
				yjdwOptions:[],
				yjwzOptions:[],
				yjryOptions:[],

					yafjList:[],

      }
    },
    created() {
		this.getSybmOptions();
		this.getBxrOptions();
		this.getBxbmOptions();
		this.getYjdwOptions();
		this.getYjwzOptions();
		this.getYjryOptions();

    },
    methods: {
		getSybmOptions()
		{
			previewDataInterface('772d2cbcadd24df79243e3d92ef5f690').then(res => {
				this.sybmOptions = res.data
			})
		},
		getBxrOptions()
		{
			previewDataInterface('8bca424f16d6448ab09e57a028853aa9').then(res => {
				this.bxrOptions = res.data
			})
		},
		getBxbmOptions()
		{
			previewDataInterface('772d2cbcadd24df79243e3d92ef5f690').then(res => {
				this.bxbmOptions = res.data
			})
		},
		getYjdwOptions()
		{
			previewDataInterface('1bc1b1e0138a4767835729e9f531990e').then(res => {
				this.yjdwOptions = res.data
			})
		},
		getYjwzOptions()
		{
			previewDataInterface('b5c62631d0534c6e876dff010edb4ae6').then(res => {
				this.yjwzOptions = res.data
			})
		},
		getYjryOptions()
		{
			previewDataInterface('8bca424f16d6448ab09e57a028853aa9').then(res => {
				this.yjryOptions = res.data
			})
		},

           goBack() {
                    this.$emit('refresh')
                },
      init(id, isDetail) {

        this.dataForm.id = id || 0;
        this.visible = true;
        this.isDetail = isDetail || false;
        this.$nextTick(() => {
          this.$refs['elForm'].resetFields();
          if (this.dataForm.id) {
            request({
              url: '/api/System/YJYAXX/' + this.dataForm.id,
              method: 'get'
            }).then(res =>{
              this.dataForm = res.data;
				this.dataForm.yjdw = this.dataForm.yjdw ? this.dataForm.yjdw.split(','):[];
				this.dataForm.yjwz = this.dataForm.yjwz ? this.dataForm.yjwz.split(','):[];
				this.dataForm.yjry = this.dataForm.yjry ? this.dataForm.yjry.split(','):[];
				this.yafjList = this.dataForm.yafj ? JSON.parse(this.dataForm.yafj) : [];

            })
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['elForm'].validate((valid) => {
          if (valid) {
				this.dataForm.yjdw = this.dataForm.yjdw.join(',');
				this.dataForm.yjwz = this.dataForm.yjwz.join(',');
				this.dataForm.yjry = this.dataForm.yjry.join(',');
				this.$set(this.dataForm, 'yafj', JSON.stringify(this.yafjList));

            if (!this.dataForm.id) {
              request({
                url: '/api/System/YJYAXX',
                method: 'post',
                data: this.dataForm,
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            } else {
              request({
                url: '/api/System/YJYAXX/' + this.dataForm.id,
                method: 'PUT',
                data: this.dataForm
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            }
          }
        })
      },

    }
  }
  </script>